<template>
  <div :data-name="slideName" @click="setActive" class="slide-item" :class="slideName === activeSlide ? 'active-tab' : ''" :style="{'width':  itemLong + 'px',}">
    <slot></slot>
  </div>
</template>

<script>
import emitter from "../../../mixins/emitter";
export default {
  name: "SlideItem",

  mixins: [emitter],

  provide() {
    return {
      slideItem: this
    };
  },
  inject: ['itemLong', 'reactiveActive', 'changeActive'],
  props: {
    slideName: String,
  },

  computed: {
    activeSlide(){
      return this.reactiveActive()
    }
  },

  methods: {
    setActive(){
      this.changeActive(this.slideName);
    }
  },

  mounted() {
    if(this.slideName) {
      this.dispatch('Slide', 'slide.add', [this]);
    }
  },
}
</script>

<style scoped>
.slide-item{
  cursor: pointer;
}
</style>
